<template>
  <table width="600" border="1" cellspacing="0">
    <thead>
      <tr>
        <td>文档名称</td>
        <td>文件</td>
        <td>分值</td>
        <td>姓名</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in docList" :key="item.name">
        <td>
          <input type="text" :value="item.docName" @blur="onBlur($event, item.nameId, 'docName')" />
        </td>
        <td>
          <input type="text" :value="item.docUrl" @blur="onBlur($event, item.nameId, 'docUrl')" />
        </td>
        <td>
          <input type="text" :value="item.score" @blur="onBlur($event, item.nameId, 'score')" />
        </td>
        <td>
          <input type="text" :value="item.name" @blur="onBlur($event, item.nameId, 'name')" />
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { docTableList, docTableEdit } from '../api/docTable'
export default {
  name: 'DocTable',
  props: {},
  mounted() {
    docTableList().then((res) => (this.docList = res))
  },
  data() {
    return {
      docList: []
    }
  },
  methods: {
    onBlur(e, id, type) {
      const list = JSON.parse(localStorage.getItem('list'))
      const editItem = list.find((ite) => ite.nameId === id)
      editItem[type] = e.target.value
      docTableEdit({ list: JSON.stringify(list) })
    }
  }
}
</script>

<style scoped lang="less">
table {
  font-size: 16px;
  border-collapse: collapse;
  // table-layout: fixed; /* 固定表格布局 */
  // word-wrap: break-word; /* 保证长单词换行 */
  margin: 0 auto;
  thead {
    background: #c9c9cb;
  }
  td {
    width: calc(100% / 4);
    height: 42px;
    padding: 0;
    input {
      font-size: 16px;
      text-align: center;
      border: none;
      width: 90%;
      height: 80%;
    }
  }
}
</style>
